const listEle = document.querySelector('.list')
const totalPriceEle = document.querySelector('.total-price')
const totalNumEle = document.querySelector('.bot_num')
const endEle = document.querySelector('.end')
let strArr = localStorage.getItem('MOVECART')
let cartList = JSON.parse(strArr) || []

/*****---------------------------------数据渲染-----------------------------******/
function oncart() {
    let str = cartList.map(item => {
        return `
           <div>     
                <input type="checkbox" name="" id="" class="iconfont icon-gougou_gougou">
                <div class="con">
                    <div>
                        <img src="${item.img}" alt="图片">
                    </div>
                    <div>
                        <div style="display:none">${item.id}</div>
                        <h5>${item.title}</h5>
                        <div class="amount">
                            <div>￥${item.price}</div>
                            <div>
                                <input type="button" name="minus" value="-"><input type="text" name="num" value="${item.num}"><input
                                    value="+" type="button" name="add">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         `
    }).join('')

    listEle.innerHTML = str
}

/***------------------------------**数量*价格*删除*事件*--------------------------*/
function onEvent() {
    let minuEle = document.querySelector('input[name="minus"]')
    listEle.addEventListener('click', function (e) {
        e = e || window.event
        let target = e.target || e.srcElement
        endEle.style.backgroundColor = 'red'
        if (target.getAttribute('name') == 'add') {
            let id = target.parentNode.parentNode.parentNode.firstElementChild.innerHTML
            console.log(id);
            let newList = cartList.find(item => item.id == id)
            newList.num++
            newList.totalPrice = newList.price * newList.num
            sumPrice()
            oncart()
        }

        if (target.getAttribute('name') == 'minus') {
            let id = target.parentNode.parentNode.parentNode.firstElementChild.innerHTML
            let newList = cartList.find(item => item.id == id)
            let index = cartList.findIndex((item, index) => item.id == id)
            console.log(index);
            newList.num--
            if (newList.num < 1) {
                newList.num = 0
                cartList.splice(index, 1)
                localStorage.setItem('MOVECART', JSON.stringify(cartList))
            }
            newList.totalPrice = newList.price * newList.num
            sumPrice()
            oncart()
        }
    })
}

/*----------------------------------计算商品总价--总的数量--------------------------*/
function sumPrice() {
    let sumPrice = 0
    let sumNum = 0
    sumPrice = cartList.reduce((s, item) => {
        return s += item.totalPrice
    }, 0)
    sumNum = cartList.reduce((s, item) => {
        return s += item.num
    }, 0)
    totalPriceEle.innerHTML = sumPrice.toFixed(2)
    totalNumEle.innerHTML = sumNum
}
oncart()
onEvent()